<template>
	<div class="login-container">
		<!-- 动态背景 -->
		<div class="background">
			<div class="gradient-bg"></div>
			<div class="gradient-bg2"></div>
		</div>

		<div class="login-box">
			<!-- Logo区域 -->
			<div class="login-logo">
				<img src="@/assets/logo.png" alt="logo" />
			</div>

			<h2 class="login-title">欢迎登录</h2>

			<!-- 登录表单 -->
			<van-form @submit="onLogin" class="login-form">
				<van-cell-group inset>
					<van-field
						v-model="username"
						name="username"
						label="用户名"
						placeholder="请输入用户名"
						:rules="[{ required: true, message: '请填写用户名' }]"
						left-icon="user-o"
						size="large"
					>
						<template #right-icon>
							<van-icon name="clear" @click="username = ''" v-if="username" />
						</template>
					</van-field>

					<van-field
						v-model="password"
						type="password"
						name="password"
						label="密码"
						placeholder="请输入密码"
						:rules="[{ required: true, message: '请填写密码' }]"
						left-icon="lock"
						size="large"
					/>
				</van-cell-group>

				<div class="login-btn">
					<van-button
						type="primary"
						block
						round
						size="large"
						native-type="submit"
						:loading="loading"
					>
						{{ loading ? '登录中...' : '登录' }}
					</van-button>
				</div>
			</van-form>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { showToast, showNotify } from 'vant'
import { useRouter } from 'vue-router'
import { useAppStore } from '@/store/app'
import { loginApi } from '@/api/user'

// const appStore = useAppStore()

const username = ref('')
const password = ref('')
const loading = ref(false)
const router = useRouter()

const onLogin = async () => {
	if (!username.value || !password.value) {
		showToast('请输入用户名和密码')
		return
	}

	loading.value = true
	try {
		const res = await loginApi(username.value, password.value)
		// 登录成功 authToken=6552e2ff-e316-4f17-8bd3-e4beeaab9df6
		// localStorage.setItem('token', res.data?.token || '123456')
    // appStore.setToken(res.data?.token || '6552e2ff-e316-4f17-8bd3-e4beeaab9df6')
		showNotify({
			type: 'success',
			message: '登录成功',
			duration: 1000
		})
		router.replace('/home')
	} catch (error: any) {
		// 登录失败
		showNotify({
			type: 'danger',
			message: error.message || '登录失败'
		})
	} finally {
		loading.value = false
	}
}
</script>

<style lang="scss" scoped>
/* 如果需要引入变量文件，使用 @use 替代 @import */
@use '@/styles/variables.scss' as *;

.login-container {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	position: relative;
	overflow: hidden;
}

// 背景动画
.background {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	z-index: -1;

	@media screen and (max-width: 767px) {
		background: linear-gradient(135deg, #f6f8fb 0%, #e9ebee 100%);
	}
}

// PC端动态渐变
@media screen and (min-width: 768px) {
	.gradient-bg,
	.gradient-bg2 {
		position: absolute;
		width: 200%;
		height: 200%;
		top: -50%;
		left: -50%;
		background: radial-gradient(
			circle at center,
			rgba(255, 255, 255, 0.8) 0%,
			rgba(255, 255, 255, 0.6) 20%,
			rgba(230, 240, 255, 0.4) 40%,
			rgba(220, 235, 255, 0.2) 60%,
			rgba(210, 230, 255, 0.1) 80%,
			rgba(200, 225, 255, 0.05) 100%
		);
		animation: rotate 60s linear infinite;
	}

	.gradient-bg2 {
		background: radial-gradient(
			circle at center,
			rgba(220, 235, 255, 0.8) 0%,
			rgba(210, 230, 255, 0.6) 20%,
			rgba(200, 225, 255, 0.4) 40%,
			rgba(190, 220, 255, 0.2) 60%,
			rgba(180, 215, 255, 0.1) 80%,
			rgba(170, 210, 255, 0.05) 100%
		);
		animation: rotate 40s linear infinite reverse;
	}
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.login-box {
	width: 100%;
	max-width: 90%;
	padding: 20px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	animation: fadeInUp 0.5s ease-out;

	@media screen and (max-width: 767px) {
		max-width: 100%;
		margin: 10px;
		padding: 15px;
	}

	@media screen and (min-width: 768px) {
		max-width: 460px;
		padding: 40px;
		background: rgba(255, 255, 255, 0.8);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border: 1px solid rgba(255, 255, 255, 0.3);
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	}
}

.login-logo {
	text-align: center;
	margin-bottom: 24px;

	img {
		width: 80px;
		height: 80px;
		border-radius: 16px;

		@media screen and (min-width: 1024px) {
			width: 100px;
			height: 100px;
		}
	}
}

.login-title {
	text-align: center;
	color: #323233;
	font-size: 20px;
	margin-bottom: 24px;

	@media screen and (min-width: 768px) {
		font-size: 24px;
		margin-bottom: 32px;
	}
}

.login-form {
	:deep(.van-cell-group) {
		margin-bottom: 0;
		border-radius: 8px;
		overflow: hidden;
		background-color: transparent;
	}

	:deep(.van-field) {
		background-color: rgba(255, 255, 255, 0.8);

		&:not(:last-child) {
			margin-bottom: 1px;
		}
	}

	:deep(.van-field__left-icon) {
		margin-right: 8px;
		font-size: 18px;

		@media screen and (min-width: 768px) {
			font-size: 20px;
		}
	}
}

.login-btn {
	margin-top: 24px;
	padding: 0 12px;

	@media screen and (min-width: 768px) {
		margin-top: 32px;

		:deep(.van-button) {
			height: 48px;
			font-size: 16px;
		}
	}
}

// 入场动画
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

// 暗色模式
@media (prefers-color-scheme: dark) {
	.background {
		@media screen and (max-width: 767px) {
			background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 100%);
		}
	}

	.login-box {
		background: #2c2c2c;

		@media screen and (min-width: 768px) {
			background: rgba(44, 44, 44, 0.8);
			border: 1px solid rgba(255, 255, 255, 0.1);
		}
	}

	.login-title {
		color: #fff;
	}

	.login-form {
		:deep(.van-field) {
			background-color: rgba(255, 255, 255, 0.05);

			input {
				color: #fff;
			}
		}
	}
}
</style>
